<template>
    <div class="search-page">
        <div v-if="loading" class="loading">加载中...</div>
        <div v-else>
            <div v-if="results.length" class="results">
                <div v-for="item in results" :key="item.id" class="result-item">
                    <NuxtLink :to="localePath(`/${item.channel?.paths[0]?.routerPath}/${item.channel?.paths[1]?.routerPath || ''}/${item.id}`)">
                        <h3 v-html="item.highlightTitle"></h3>
                        <p v-html="item.highlightBody"></p>
                    </NuxtLink>
                </div>
                <Pagination :current-page="currentPage" :total-pages="totalPages"
                            :base-url="`/search?keyword=${keyword}&page=${currentPage}`" />
            </div>
            <div v-else class="no-results">
                暂无数据
            </div>
        </div>
    </div>
</template>

<script setup>
import Pagination from '@/components/list/Pagination.vue'

const route = useRoute()
const router = useRouter()
const { $fetchGov } = useNuxtApp()

const localePath = useLocalePath()
const keyword = ref('')
const results = ref([])
const loading = ref(false)
const currentPage = ref(1)
const totalPages = ref(1)
// 高亮函数
// const highlight = (text, keyword) => {
//     if (!text || !keyword) return text
//     const regex = new RegExp(`(${keyword})`, 'gi')
//     return text.replace(regex, '<span class="highlight">$1</span>')
// }

currentPage.value = Number(route.query.page) || 1

watch([() => route.query.keyword, () => route.query.page], async ([newKeyword, newPage]) => {
    if (newKeyword) {
        keyword.value = newKeyword
        currentPage.value = Number(newPage) || 1
        loading.value = true
        try {
            const { data } = await $fetchGov('/app/api/article/search/page', {
                params: { 
                    q: keyword.value,
                    page: currentPage.value,
                    size: 10,
                    _t: Date.now()
                }
            })
            results.value = data?.content || []
            totalPages.value = data?.totalPages || 1
        } catch (e) {
            console.error('搜索失败:', e)
        } finally {
            loading.value = false
        }
    }
}
, { immediate: true })
</script>

<style scoped>
.search-page {
    padding: 2rem 0;
}
.result-item {
    a{
        text-decoration: none;
        h3{
            font-size: 1rem;
            margin-bottom: 0.5rem;
            color: #222;
        }
        p{
            font-size: 0.9rem;
            color: #333;
        }
    }
}
.results {
    max-width: 1200px;
    margin: 0 auto;
    background: #fff;
    border-radius: 5px;
}
.result-item {
    padding: 1.5rem;
    border-bottom: 1px solid #eee;
}
.loading, .no-results {
    text-align: center;
    padding: 50px 0;
    color: #666;
}
@media (max-width: 768px) {
    .search-page {
        padding: 1rem 0;
        .results{
            width:94%;
            margin:0 auto;
            .result-item{
                padding: 0.8rem;
            }
        }
    }
}
</style>